// @ts-ignore
import ReactUeditor from '@/components/ueditor/ReactUeditor';
import React, {useEffect, useState} from "react";
import {Modal} from "antd";

const config = {
  initialFrameWidth :'100%',
  initialFrameHeight: window.innerHeight-200,
  minFrameHeight:window.innerHeight-400,
  autoHeightEnabled: false,
  scaleEnabled: false,
  elementPathEnabled: false,
  retainOnlyLabelPasted: true,
  wordCount: true,
  xssFilterRules: true,
  inputXssFilter: true,
  outputXssFilter: true,
  enableContextMenu: false,
  UEDITOR_HOME_URL:'/ueditor/',
  imageScaleEnabled:false,
  imagePopup:false,
  toolbars: [[
    'uploadImagePlugin','undo','source'
  ]],
  whitList: {
    a:      ['target', 'href', 'title', 'class', 'style','paicent-data-id'],
    abbr:   ['title', 'class', 'style'],
    address: ['class', 'style'],
    area:   ['shape', 'coords', 'href', 'alt'],
    article: [],
    aside:  [],
    audio:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style','paicent-data-id','duration'],
    b:      ['class', 'style'],
    bdi:    ['dir'],
    bdo:    ['dir'],
    big:    [],
    blockquote: ['cite', 'class', 'style'],
    br:     [],
    caption: ['class', 'style'],
    center: [],
    cite:   [],
    code:   ['class', 'style'],
    col:    ['align', 'valign', 'span', 'width', 'class', 'style'],
    colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
    dd:     ['class', 'style'],
    del:    ['datetime'],
    details: ['open'],
    div:    ['class', 'style'],
    dl:     ['class', 'style'],
    dt:     ['class', 'style'],
    em:     ['class', 'style'],
    font:   ['color', 'size', 'face'],
    footer: [],
    h1:     ['class', 'style'],
    h2:     ['class', 'style'],
    h3:     ['class', 'style'],
    h4:     ['class', 'style'],
    h5:     ['class', 'style'],
    h6:     ['class', 'style'],
    header: [],
    hr:     [],
    i:      ['class', 'style'],
    img:    ['src', 'alt', 'title','id', '_src','_url', 'loadingclass', 'class', 'data-latex','paicent-data-id'],
    ins:    ['datetime'],
    li:     ['class', 'style'],
    mark:   [],
    nav:    [],
    ol:     ['class', 'style'],
    p:      ['class', 'style'],
    pre:    ['class', 'style'],
    s:      [],
    section:['class','style'],
    small:  [],
    span:   ['class', 'style'],
    sub:    ['class', 'style'],
    sup:    ['class', 'style'],
    strong: ['class', 'style'],
    table:  ['width', 'border', 'align', 'valign', 'class', 'style'],
    tbody:  ['align', 'valign', 'class', 'style'],
    td:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
    tfoot:  ['align', 'valign', 'class', 'style'],
    th:     ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
    thead:  ['align', 'valign', 'class', 'style'],
    tr:     ['rowspan', 'align', 'valign', 'class', 'style'],
    tt:     [],
    u:      [],
    iframe: ['frameborder','src','width','height'],
    ul:     ['class', 'style'],
    source:     ['src', 'type'],
    video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'poster','height', 'width', 'class', 'style','paicent-data-id']
  }
}

type MyEditorProps = {
  onChange: (content: string) => void;
  value?: string;
  onReady?: (ueditorRef: any) => void;
  height?: number;
}

const MyEditor: React.FC<MyEditorProps> = ({onChange,value='',onReady}) =>{
  const [content,setContent] = useState<string>(value||'');

  useEffect(()=>{
    setContent(value);
  },[value])

  const uploadImagePlugin = (ueditor:any) => {
    return {
      menuText: '插入图片',
      cssRules: 'background-position: -159px -157px;',
      render: (visible: boolean, closeModal: () => void) => {
        return (
          <Modal open={visible} onCancel={closeModal} destroyOnClose maskClosable></Modal>
        );
      },
    };
  };


  return (
    <div className='ueditor'>
      <ReactUeditor
        getRef={onReady}
        value={content}
        debug
        plugins={[uploadImagePlugin]}
        onChange={(content: string)=>onChange(content)}
        config={config}
        ueditorPath='/ueditor/'
      />
    </div>
  )
}



export default MyEditor;
